@extends('layouts.mobile')

@section('title', '确认订单')

@section('content')
    <div class="buynow" id="buynow">
        <div class="address">
            <div class="iconfont icon-location"></div>
            <div class="info" v-on:click="togglePicker()">
                <p style="font-size: 16px;">收货人:@{{ shipping.consignee }} 联系电话:@{{ shipping.phone }}</p>
                <p>收货地址:@{{ shipping.province }} @{{ shipping.city }} @{{ shipping.district }} @{{ shipping.street }}</p>
            </div>
        </div>
        <div class="order-info">
            <form method="post" id="Form" action="{{url('mobile/auction/createorder')}}">
                {{csrf_field()}}
                <input type="hidden" name="itemid" value="{{$itemid}}">
                <input type="hidden" name="quantity" value="{{$quantity}}">
                <input type="hidden" name="address_id" :value="shipping.address_id">
                <input type="hidden" name="pay_type" value="1">
                <input type="hidden" name="shipping_type" value="1">
                <div class="shop-name">{{$item->shop->shop_name}}</div>
                <div class="item-info">
                    <div class="image bg-cover" style="background-image: url({{image_url($item['thumb'])}})"></div>
                    <div class="data">
                        <div class="title">{{$item['title']}}</div>
                        <div class="flex"></div>
                        <div class="price">
                            <strong>￥{{$item['price']}}</strong>
                            <span>x{{$quantity}}</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="cell-left">配送方式</div>
                    <div class="cell-right">快递</div>
                </div>
                <div class="row">
                    <div class="cell-left" style="flex: none; margin-right: 10px;">给卖家留言</div>
                    <div class="cell-right" style="flex: 1;">
                        <textarea class="textarea" title="" placeholder="选填，对本次交易的说明" name="buyer_message"></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="tabbar">
        <div class="bar">
            <div class="order-fee">
                <span>总计:</span>
                <strong>{{formatAmount($total_fee)}}</strong>
            </div>
            <div class="settlement" onclick="$('#Form').submit()">提交订单</div>
        </div>
    </div>

    <div class="new-address" style="z-index: 990;" v-show="showPicker">
        <div class="content">
            <div class="titlebar">
                <div class="iconfont icon-back" v-on:click="togglePicker()"></div>
                <div class="flex"></div>
                <strong>选择收货地址</strong>
                <div class="flex"></div>
                <div class="iconfont icon-add" v-on:click="toggleForm()"></div>
            </div>

            <div class="address-list">
                <div class="address-item" style="border-top: 0; margin: 0;" v-for="item in addressItems">
                    <div class="info" v-on:click="onPicked(item)">
                        <div class="consignee">
                            <div class="name">@{{ item.consignee }}</div>
                            <div class="phone">@{{ item.phone }}</div>
                        </div>
                        <div class="addr">@{{ item.province }} @{{ item.city }} @{{ item.district }} @{{ item.street }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('mobile.address.newaddress')
@stop

@section('foot')
    <script type="text/javascript">
        var shipping = @json($shipping);
        var vm = new Vue({
            el:'#app',
            data:{
                address:{},
                shipping:shipping,
                addressItems:[],
                showPicker:false,
                showForm:false
            },
            mounted:function(){
                this.loadAddress();
                var district = new DistrictSelector({
                    province:this.province,
                    city:this.city,
                    district:this.district
                });
            },
            methods:{
                loadAddress:function(){
                    var self = this;
                    $.ajax({
                        url:'/user/address/getjson',
                        success:function (response) {
                            self.addressItems = response.items;
                        }
                    });
                },
                togglePicker : function () {
                    this.showPicker = !this.showPicker;
                },
                onPicked:function (address) {
                    this.showPicker = !this.showPicker;
                    this.shipping = address;
                },
                save:function () {
                    //alert(JSON.stringify(this.address));
                    if (!this.address.consignee) {
                        DSXUI.showToast('请填写收货人姓名');
                        return false;
                    }

                    if (!this.address.phone) {
                        DSXUI.showToast('请填写联系电话');
                        return false;
                    }

                    if (!this.address.province) {
                        DSXUI.showToast('请选择省份');
                        return false;
                    }

                    if (!this.address.city) {
                        DSXUI.showToast('请选择城市');
                        return false;
                    }

                    if (!this.address.district) {
                        DSXUI.showToast('请选择区县');
                        return false;
                    }

                    if (!this.address.street) {
                        DSXUI.showToast('请填写街道地址');
                        return false;
                    }

                    if (this.address.isdefault) {
                        this.address.isdefault = 1;
                    } else {
                        this.address.isdefault = 0;
                    }
                    var self = this;
                    $.ajax({
                        type:'POST',
                        url:'/user/address/save',
                        data: {
                            address_id : this.address_id,
                            address : this.address
                        },
                        beforeSend:DSXUI.showSpinner,
                        success:function () {
                            DSXUI.hideSpinner();
                            self.toggleForm();
                            self.loadAddress();
                        }
                    });
                },

                toggleForm:function () {
                    this.showForm = !this.showForm;
                }
            }
        });
    </script>
@stop
